<template>
  <div style="background-color: #ffffff; padding: 24px">
    <a-form layout="inline">
      <a-row>
        <a-col :span="12">
          <a-form-item label="请选择日期">
            <a-range-picker :placeholder="['开始时间', '结束时间']"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="商品名称">
            <a-input placeholder="输入商品名称" :style="{width:'400px'}"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="searchTool">
      <a-button type="primary" html-type="submit">
        查询
      </a-button>
      <a-button :style="{marginLeft:'10px'}">
        重置
      </a-button>
    </div>
    <a-tabs style="margin-top: 16px">
      <a-tab-pane key="1" tab="抖音短视频">
        <a-table :columns="columns1" :data-source="data1"></a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="抖音直播">
        <a-table :columns="columns2" :data-source="data2"></a-table>
      </a-tab-pane>
      <a-tab-pane key="3" tab="微头条">
        <a-table :columns="columns3" :data-source="data3"></a-table>
      </a-tab-pane>
      <a-tab-pane key="4" tab="西瓜直播">
        <a-table :columns="columns4" :data-source="data4"></a-table>
      </a-tab-pane>
      <a-tab-pane key="5" tab="联盟">
        <a-table :columns="columns4" :data-source="data4"></a-table>
      </a-tab-pane>
      <span slot="tabBarExtraContent">数据更新时间: 2020-09-04</span>
    </a-tabs>
  </div>
</template>

<script>
const columns1 = [
  {
    title: '视频名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '抖音视频购物车展示量',
    dataIndex: 'address',
    key: 'address 1'
  },
  {
    title: '抖音视频购物车点击量',
    dataIndex: 'address',
    key: 'address 2'
  },
  {
    title: '抖音视频购物车点击率',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '商品曝光量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '商品详情页浏览量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效订单量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效商品件数',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效金额',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '转化率',
    dataIndex: 'address',
    key: 'address 3'
  }
]
const columns2 = [
  {
    title: '抖音直播购物车展示量',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '抖音直播购物车点击量',
    dataIndex: 'address',
    key: 'address 1'
  },
  {
    title: '抖音直播购物车点击率',
    dataIndex: 'address',
    key: 'address 2'
  },
  {
    title: '商品曝光量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '商品详情页浏览量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效订单量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效商品件数',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效金额',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '转化率',
    dataIndex: 'address',
    key: 'address 3'
  }
]
const columns3 = [
  {
    title: '内容ID',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '商品曝光量',
    dataIndex: 'address',
    key: 'address 1'
  },
  {
    title: '商品详情页浏览量',
    dataIndex: 'address',
    key: 'address 2'
  },
  {
    title: '有效订单量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效商品件数',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效金额',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '转化率',
    dataIndex: 'address',
    key: 'address 3'
  }
]
const columns4 = [
  {
    title: '内容名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '商品曝光量',
    dataIndex: 'address',
    key: 'address 1'
  },
  {
    title: '商品详情页浏览量',
    dataIndex: 'address',
    key: 'address 2'
  },
  {
    title: '有效订单量',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效商品件数',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '有效金额',
    dataIndex: 'address',
    key: 'address 3'
  },
  {
    title: '转化率',
    dataIndex: 'address',
    key: 'address 3'
  }
]
const data1 = []
const data2 = []
const data3 = []
const data4 = []
export default {
  name: 'ProductAnalyze',
  data () {
    return {
      data1,
      data2,
      data3,
      data4,
      columns1,
      columns2,
      columns3,
      columns4
    }
  }
}
</script>

<style scoped>
  .searchTool {
    margin-top: 20px;
    text-align: right;
  }
</style>
